KnockoutJS তে Checkbox এবং Radio Button এর সাথে data binding খুবই সহজ এবং কার্যকরী। KnockoutJS এর মাধ্যমে, আপনি two-way data binding ব্যবহার করে checkboxes এবং radio buttons এর মান সিঙ্ক্রোনাইজ করতে পারেন, এবং তা স্বয়ংক্রিয়ভাবে UI তে আপডেট হয় যখন মডেল ডেটা পরিবর্তিত হয়।
এখানে KnockoutJS এর মাধ্যমে checkbox এবং radio button binding করার পদ্ধতি আলোচনা করা হলো।
1. Checkbox Data Binding
Checkboxes সাধারণত true/false মান রিটার্ন করে এবং KnockoutJS এর মাধ্যমে observable ডেটার সাথে checkbox এর মানের সিঙ্ক্রোনাইজেশন করা হয়।
Checkbox with One-Way Binding:
এখানে একটি সিম্পল checkbox এর উদাহরণ দেওয়া হয়েছে যেখানে checkbox এর মান observable ডেটার সাথে সংযুক্ত করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Checkbox Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Is subscribed: <span data-bind="text: isSubscribed"></span></h2>
<label for="subscribeCheckbox">Subscribe:</label>
<input type="checkbox" id="subscribeCheckbox" data-bind="checked: isSubscribed">
<script>
function AppViewModel() {
this.isSubscribed = ko.observable(false); // Default value is false
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
isSubscribedএকটি observable যা checkbox এর মানের সাথে বাইন্ড করা হয়েছে। যখন checkbox টিক হবে, তখনisSubscribedএর মান true হবে, এবং যদি টিক না থাকে, তবে তার মান false হবে।data-bind="checked: isSubscribed"দ্বারা checkbox এর মান এবং observable এর মান একে অপরের সাথে সিঙ্ক্রোনাইজ হয়।
Checkbox with Two-Way Binding:
KnockoutJS তে checkbox এর জন্য two-way data binding ব্যবহার করা যায়, অর্থাৎ যখন আপনি checkbox পরিবর্তন করবেন, তখন এটি ViewModel এর observable ডেটা আপডেট করবে এবং vice versa।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Checkbox Two-Way Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Is subscribed: <span data-bind="text: isSubscribed"></span></h2>
<label for="subscribeCheckbox">Subscribe:</label>
<input type="checkbox" id="subscribeCheckbox" data-bind="checked: isSubscribed">
<script>
function AppViewModel() {
this.isSubscribed = ko.observable(false); // Default value is false
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে, checked binding ব্যবহার করা হয়েছে যাতে checkbox এর মান এবং observable একে অপরের সাথে সিঙ্ক্রোনাইজ হয়।
2. Radio Button Data Binding
Radio Buttons সাধারণত একাধিক বিকল্পের মধ্যে একটি নির্বাচন করতে ব্যবহৃত হয়। KnockoutJS তে radio buttons এর সাথে two-way data binding ব্যবহার করে, আপনি ইউজারের নির্বাচিত মান সঠিকভাবে ViewModel এ সিঙ্ক্রোনাইজ করতে পারেন।
Radio Button Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Radio Button Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Your selected option: <span data-bind="text: selectedOption"></span></h2>
<label>
<input type="radio" name="option" value="Option1" data-bind="checked: selectedOption"> Option 1
</label>
<label>
<input type="radio" name="option" value="Option2" data-bind="checked: selectedOption"> Option 2
</label>
<label>
<input type="radio" name="option" value="Option3" data-bind="checked: selectedOption"> Option 3
</label>
<script>
function AppViewModel() {
this.selectedOption = ko.observable("Option1"); // Default selected option
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- এখানে, radio buttons এর জন্য
data-bind="checked: selectedOption"ব্যবহার করা হয়েছে। এতে selectedOption observable ডেটার মান অনুযায়ী, ইউজারের নির্বাচিত radio button স্বয়ংক্রিয়ভাবে টিক হয়ে যাবে। - যখন ইউজার একটি radio button নির্বাচন করবেন, তখন
selectedOptionএর মান আপডেট হবে এবং UI তে তা প্রদর্শিত হবে।
Multiple Checkboxes Binding (Array Binding)
যদি আপনি একাধিক checkbox এর মান একটি অ্যারে বা তালিকা হিসেবে রাখতে চান, তবে KnockoutJS তে checkedValue এবং observableArray ব্যবহার করতে পারবেন।
Multiple Checkbox Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Multiple Checkbox Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Selected options:</h2>
<ul data-bind="foreach: selectedOptions">
<li data-bind="text: $data"></li>
</ul>
<label>
<input type="checkbox" data-bind="checked: selectedOptions, value: 'Option1'"> Option 1
</label>
<label>
<input type="checkbox" data-bind="checked: selectedOptions, value: 'Option2'"> Option 2
</label>
<label>
<input type="checkbox" data-bind="checked: selectedOptions, value: 'Option3'"> Option 3
</label>
<script>
function AppViewModel() {
this.selectedOptions = ko.observableArray(); // Array to hold selected options
}
// Activating KnockoutJS bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Explanation:
- এখানে, একাধিক checkbox এর মান
selectedOptionsনামক একটি observableArray তে সিঙ্ক্রোনাইজ করা হচ্ছে। - যখন একটি checkbox চেক করা হবে, সেই মান observable array তে যোগ হবে, এবং যখন checkbox আনচেক করা হবে, সেই মান অ্যারের থেকে সরিয়ে দেওয়া হবে।
- foreach binding ব্যবহার করে selectedOptions অ্যারের সব নির্বাচিত অপশনকে HTML লিস্টে প্রদর্শন করা হচ্ছে।
KnockoutJS তে checkboxes এবং radio buttons এর সাথে data binding সহজেই পরিচালনা করা যায়। Checkbox এবং radio button এর মাধ্যমে two-way data binding তৈরি করে আপনি UI এবং ডেটার মধ্যে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন নিশ্চিত করতে পারেন, এবং observable ডেটার মান পরিবর্তন হলে তা UI তে অবিলম্বে আপডেট হয়। KnockoutJS এর এই ক্ষমতা অ্যাপ্লিকেশন ডেভেলপমেন্টে ইন্টারঅ্যাকটিভ এবং ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।
